<template>
	<view>

		<!-- #ifdef APP-PLUS || MP-WEIXIN -->
		<u-navbar title="我的收益" back-icon-color="#000" :is-back="true" title-color="#000"
			:background="{ background:'#ffffff'}" :border-bottom="true"></u-navbar>
		<!-- #endif -->

		<view class="top_box_wrap">
			<view class="top_box">
				<view class="top_item1">
					<view>余额</view>
					<view @click="lijitixian()">立即提现</view>
				</view>
				<view class="top_item2">
					<view>{{userData.money || '0.00'}}</view>
					<view>今日收益：{{makemoneyData.today_income_money || '0.00'}}元</view>
				</view>
			</view>
			<view class="tabs_box">
				<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#FF4910">
				</u-tabs>
			</view>
		</view>

		<view class="lanjiazai" v-if="skeletonLoading">
			<view>
				<view class="loading_icon">
					<image :src="BestImgUrl + 'loading.gif'" class="loading_gif"></image>
				</view>
				<view class="tag">加载中...</view>
			</view>
		</view>
		<view v-else>
			<view class="m_list_wrap" v-if="incomeList.length != 0">
				<view class="m_list_item" v-for="(item,index) in incomeList" :key="index">
					<view class="m_list_item_info">
						<view class="m_title">
							<view class="type_title">{{item.title}}</view>
						</view>
						<view class="m_time">{{item.create_time}}</view>
						<view class="m_time" v-if="item.remark" style="margin-top: 8rpx;">备注:{{item.remark}}</view>
					</view>
					<view class="m_price">{{item.amount}}</view>
				</view>
				<u-loadmore icon-type="flower" :status="loadingstatus" font-size="24" :load-text="loadText"
					margin-bottom="60" />
			</view>
			<view v-else-if="incomeList.length == 0 && failTimeOutShow == false" class="noData_box">
				<image src="/static/images/noData.png" mode="widthFix"></image>
				<view>暂无明细</view>
			</view>
			<view v-else-if="failTimeOutShow == true && incomeList.length == 0" class="noData_box">
				<image src="/static/images/Frame33412.png" mode="widthFix"></image>
				<view class="timeOut">
					<view>网络好像出问题了~</view>
					<view @click="refurbish()">立即刷新</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				skeletonLoading: true,
				list: [{
					name: '全部'
				}, {
					name: '探店补贴'
				}, {
					name: '推广收益'
				}, {
					name: '提现/支付'
				}],
				current: 0,
				pageSize: 1,
				pageNum: 10,
				typs: '',
				BestImgUrl: app.globalData.imgurlBwc,
				loadingstatus: 'loading',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '加载中...',
					nomore: '没有更多了'
				},

				failTimeOutShow: false,

				userData: {},
				makemoneyData: {},

				incomeList: []
			}
		},
		onShow() {
			this.getMyinCome()
			let userInfo = uni.getStorageSync('userinfo')
			this.userData = userInfo
			this.getmakemoney()
		},
		//下拉刷新
		onPullDownRefresh() {
			let that = this
			that.pageSize = 1
			that.pageNum = 10
			that.skeletonLoading = true
			that.failTimeOutShow = false
			//that.shopsList = []
			setTimeout(function() {
				that.getMyinCome()
				uni.stopPullDownRefresh();
			}, 1500);
		},
		//触底加载
		onReachBottom() {
			let that = this
			this.loadingstatus = 'loading';
			setTimeout(function() {
				that.pageSize++;
				that.getMyinCome()
				uni.hideNavigationBarLoading()
			}, 500);
		},
		methods: {
			//刷新重试商家列表
			refurbish() {
				let that = this

				that.pageSize = 1
				that.pageNum = 10
				that.skeletonLoading = true

				setTimeout(() => {
					that.getMyinCome()
				}, 2000)

			},
			getmakemoney() {
				let that = this
				that.$api.Getmakemoney({

				}).then(res => {
					that.makemoneyData = res.data.result
				}).catch(err => {
					uni.showToast({
						title: err.data.msg,
						icon: 'none',
						duration: 2000
					});
				})
			},
			getMyinCome() {
				let that = this
				that.$api.getMyincome({
					page: that.pageSize, //否	int	页码 默认第一页
					limit: that.pageNum, //否	int	每页条数 默认10条
					type: that.typs //否	int	默认不传全部 1霸王餐补贴 2推广收益 2提现/支付
				}).then(res => {

					setTimeout(() => {
						if (that.pageSize != 1) {
							if (res.data.result.length != 0) {
								that.loadingstatus = 'loading';
								that.incomeList = that.incomeList.concat(res.data.result)
							} else {
								that.loadingstatus = 'nomore'
							}
						} else {
							that.incomeList = res.data.result
							that.loadingstatus = 'nomore'
						}

						that.failTimeOutShow = false

						that.skeletonLoading = false

					}, 2000)

				}).catch(err => {
					if (!err.data) {
						//不存在就是访问超时或者接口错误
						//console.log('请求错误或请求超时', err.errMsg)
						that.incomeList = []
						that.skeletonLoading = false
						that.failTimeOutShow = true
					} else {
						uni.showToast({
							title: err.data.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
      // 收益分类
			change(res) {
				this.current = res.index;
        console.log('选择的分类：', this.current)
				if (res.index == 0) {
					this.typs = ''
					this.pageSize = 1
					this.skeletonLoading = true
					this.getMyinCome()
				} else if (res.index == 1) {
					this.typs = 1
					this.pageSize = 1
					this.skeletonLoading = true
					this.getMyinCome()
				} else if (res.index == 2) {
					this.typs = 2
					this.pageSize = 1
					this.skeletonLoading = true
					this.getMyinCome()
				} else if (res.index == 3) {
					this.typs = 3
					this.pageSize = 1
					this.skeletonLoading = true
					this.getMyinCome()
				}
			},
			lijitixian() {
				uni.navigateTo({
					url: '/mePages/pages/Cashwithdrawal'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FBF8FB;
	}

	.lanjiazai {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}

	.noData_box {
		margin-top: 0;
		padding-bottom: 260rpx;
		text-align: center;
		color: #999;
		text-align: center;

		image {
			width: 280rpx;
		}

		.timeOut {
			font-size: 12px;
			color: #666;
			margin: 0px 0px 7px;
			display: flex;
			align-items: center;
			justify-content: center;

			view:nth-child(2) {
				color: #00acfd;
				padding-left: 10rpx;
			}
		}

		.lijipay {
			width: 30%;
			position: relative;
			margin: 0 auto;

			.u-size-default {
				height: 70rpx !important;
				line-height: 70rpx !important;
			}
		}
	}

	.m_list_wrap {
		padding: 30rpx;

		.m_list_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #ffffff;
			border-radius: 24rpx;
			padding: 30rpx;
			margin-bottom: 30rpx;

			.m_list_item_info {
				flex: 1;

				.m_title {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;

					.type_title {
						font-weight: bold;
						font-size: 34rpx;
						word-break: break-all;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						overflow: hidden;
					}

					image {
						width: 50rpx;
						height: 50rpx;
						border-radius: 200rpx;
						margin: 0 10rpx;
					}

					span {
						font-weight: initial;
						color: #666666;
						margin-right: 6rpx;
					}
				}

				.m_type {
					margin: 10rpx 0;
					color: #666666;
					word-break: break-all;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}

				.m_time {
					color: #666666;
				}
			}

			.m_price {
				color: #FF4910;
				font-weight: bold;
				font-size: 40rpx;
			}
		}
	}

	.top_box_wrap {
		padding: 30rpx 20rpx 20rpx 20rpx;
		background-color: #ffffff;

		.tabs_box {
			margin-top: 20rpx;
		}

		.top_box {
			//background-image: linear-gradient(45deg, #3E4759, #5D626D);
			background-image: url('https://h5.hwhsh.com/public/uploads/h5/me/mx_bg.jpg');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			padding: 34rpx 50rpx;
			border-radius: 28rpx;
			color: #FBE8CD;

			.top_item1 {
				margin-bottom: 10rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				view:nth-child(1) {}

				view:nth-child(2) {
					border-radius: 200rpx;
					padding: 10rpx 38rpx;
					background-color: #FBE8CD;
					color: #3E4759;
				}
			}

			.top_item2 {
				display: flex;
				align-items: center;
				justify-content: space-between;

				view:nth-child(1) {
					font-size: 48rpx;
					font-weight: bold;
				}

				view:nth-child(2) {}
			}
		}
	}
</style>